<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <input id="num" type="text" >
        <button id="btn">点击</button>
        <span id="result"></span>
    </p>
</body>
<script>
    //输入一个0-100的整数, 判断是否是偶数?

    // 注意:
    // (1)  JS操作元素前,需要先获取元素
    // (2)  从输入框(input)取值时字符串类型
    // (3)  JS操作元素改变样式时,都是通过内联style来实现的


    // (1) 获取元素  => JS操作元素前,需要先获取元素
    var numInp = document.getElementById("num");
    var btn = document.getElementById("btn");
    var resultSpan = document.getElementById("result");

    console.log(numInp);
    console.log(btn);
    console.log(resultSpan);

    // var num = numInp.value;  // 错误演示: 写在此处页面加载时取值, 此时numInp输入框还是空的 => ""

    // console.log(1, "hello")

    // (2) 给按钮绑定点击事件
    btn.onclick = function(){
        // alert(1111);

        // (3) 点击时取值   =>  从输入框(input)取值时字符串类型
        // console.log(1, numInp.value);  // 取numInp输入框的value值(表单取值)

        // (4) 判断
        //   a. 要有值   
        //   b. 0-100的整数
        // if(numInp.value){ // numInp.value != ""

        //     if(numInp.value >=0 && numInp.value <=100 && numInp.value % 1 == 0){
        //         if(numInp.value % 2 == 0){
        //             alert(numInp.value + "是偶数");
        //         }else{
        //             alert(numInp.value + "是奇数");
        //         }

        //     }else{
        //         alert("请输入0-100的整数");
        //     }

        // }else{  
        //     alert("请输入一个数字");
        // }

        // debugger;

        var num = numInp.value; // 取numInp输入框的value值(表单取值) 赋值给变量num

        if(num){ // num != ""
            if(num >=0 && num <=100 && num % 1 == 0){
                if(num % 2 == 0){
                    // alert(num + "是偶数");
                    resultSpan.innerText = num + "是偶数";
                    resultSpan.style.color="green";
                }else{
                    // alert(num + "是奇数");
                    resultSpan.innerText = num + "是奇数";
                    resultSpan.style.color="green";
                }

            }else{
                // alert("请输入0-100的整数");
                resultSpan.innerText = num + "请输入0-100的整数";
                resultSpan.style.color="red";
            }
        }else{  
            // alert("请输入一个数字");
            resultSpan.innerText = num + "请输入一个数字";
            resultSpan.style.color="red";
        }
    }





</script>
</html>